Promise 执行顺序问题

在本章将学习到如何判读 Promise 以及同步代码与异步代码的执行顺序问题。

同步代码与异步代码

JavaScript 是一个单线程的编程语言，在执行过程中，通常按顺序往下执行，这种我们称之为同步代码。但是如果有些事情并不需要现在进行，比如我们可以 post 一条数据，在返回数据后自动调用回调的函数，这种情况就是属于异步代码了。

异步代码

异步代码通常又分为宏任务和微任务。

微任务有 nextTick，Promise，MutationObserver 等等

宏任务有 setinterval，setTimeout 等等。

由于属于基础教程，所以提供一个简单粗暴的结果：微任务听着就比宏任务小，所以微任务先执行，宏任务后执行。

我们来看一个 demo

console.log("主线程1");
new Promise(function (resolve, reject) {
  console.log("创建Promise，也属于主线程");
  resolve("1");
}).then(function (data2) {
  console.log("then属于微任务");
});
console.log("主线程2");
setTimeout(() => {
  console.log("宏任务");
}, 0);

输出结果

主线程1  eval code:1:9
创建Promise，也属于主线程  eval code:3:11
主线程2  eval code:8:9
then属于微任务  eval code:6:11
宏任务

我们首先console

然后进入new promise，在new Promise的时候由于是创建Promise的过程，所以属于同步代码，会正常输出一个console

然后resolve了这个promise

then注册到了这个promise上，属于一个微任务。

往下在主线程搞了console输出

然后碰到了setTimeout，这是一个宏任务

所以代码执行完毕之后任务队列还有

then以及setTimeout

then属于微任务优先执行，所以先执行then，后执行setTimeout。

常用的很多代码和操作其实都基于这个理论，相信如果下次你碰到类似的代码就可以解释了。